import React, { Component } from "react";
import Taro from "@tarojs/taro";
import { View, Text } from "@tarojs/components";
import { AtInput, AtTabBar, AtTabs, AtTag, AtCard, AtIcon } from "taro-ui";
import "taro-ui/dist/style/components/tabs.scss";
import "taro-ui/dist/style/components/button.scss"; // 按需引入
import "./index.scss";
import "taro-ui/dist/style/components/badge.scss";
import "taro-ui/dist/style/components/icon.scss";
import "taro-ui/dist/style/components/input.scss";
import "taro-ui/dist/style/components/tag.scss";
import "taro-ui/dist/style/components/card.scss";
import "taro-ui/dist/style/components/flex.scss";
import Bar from "../component/Bar";
export default class Index extends Component {
  componentWillMount() {}

  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}
  state = {
    tabList: [
      { title: "热门" },
      { title: "美容师" },
      { title: "美工" },
      { title: "客服" },
      { title: "打包" },
      { title: <AtIcon value="add" size="18" color="#A1A4B0"></AtIcon> }
    ],
    current: 0,
    jobs: [
      {
        note: "北京天天有余餐饮有限责任公司",
        extra: "丰台-方庄",
        title: "急聘美容师12k免费培训",
        salary: "15000-20000",
        job: "美容师"
      },
      {
        note: "北京天天有余餐饮有限责任公司",
        extra: "丰台-方庄",
        title: "急聘美容师12k免费培训",
        salary: "15000-20000",
        job: "美容师"
      }
    ]
  };
  render() {
    const { tabList, current, jobs } = this.state;
    return (
      <View className="page">
        <View className="bg-color-green height-90vh padding-top-46">
          <text className="white-color font-size-26 margin-left-20">
            想找什么工作
          </text>
          <AtInput
            title={
              <AtIcon
                className="margin-left-10"
                value="search"
                color="#bec1ca"
                size="20"
              ></AtIcon>
            }
            placeholder="搜索职位/公司"
            className="width-335 height-46 center border-radios-5 query"
            style={{ textAlign: "center" }}
          />
          <View className="padding-left-right-14 width-100 bg-color-white height-100">
            <AtTabs
              current={current}
              className="height-60"
              tabList={tabList}
              onClick={e => {
                this.setState({ current: e });
              }}
            ></AtTabs>
            <View className="margin-bottom-20 at-row">
              <View className="at-col at-col-2">
                <AtTag className="tag-active">最新</AtTag>
              </View>
              <View className="at-col at-col-8">
                <AtTag className="margin-left-right-20">周边</AtTag>
              </View>
              <View className="at-col at-col-1">
                <AtIcon value="filter" size="16" color="#A1A4B0"></AtIcon>
                <Text> 筛选</Text>
              </View>
            </View>
            <View className="scroll" catchMove>
              {jobs.map(item => (
                <AtCard
                  note={item.note}
                  extra={item.extra}
                  title={item.title}
                  className="position-relative"
                >
                  <Text className="dollor-text">{item.salary} 元</Text>
                  <Text className="margin-left-right-20">·</Text>
                  <Text>{item.job}</Text>
                  <Text className="button">申请</Text>
                </AtCard>
              ))}
            </View>
          </View>
        </View>
        <Bar current={0} />
      </View>
    );
  }
}
